<template>
  <div class="survey">
    <div class="survey-title">概况</div>
    <el-row :gutter="35" class="survey-summary">
      <el-col :span="6">
        <el-row type="flex" justify="center" class="item">
          <div class="name">
            <span class="number">{{
              basicData.course_count == null ? '0' : basicData.course_count
            }}</span
            >门
          </div>
          <div class="desc">已学课程</div>
        </el-row>
      </el-col>
      <el-col :span="6">
        <el-row type="flex" justify="center" class="item">
          <div class="name">
            <template v-if="learnTime(basicData.today_learn_time).hour > 0">
              <span class="number"> {{ learnTime(basicData.today_learn_time).hour }}</span>
              小时
            </template>
            <template v-if="learnTime(basicData.today_learn_time).minute > 0">
              <span class="number"> {{ learnTime(basicData.today_learn_time).minute }}</span>
              分钟
            </template>
            <template v-if="learnTime(basicData.today_learn_time) == 0">
              <span class="number"> {{ learnTime(basicData.today_learn_time) }}</span>
              分钟
            </template>
          </div>
          <div class="desc">今日学习</div>
        </el-row>
      </el-col>
      <el-col :span="6">
        <el-row type="flex" justify="center" class="item">
          <div class="name">
            <template v-if="learnTime(basicData.week_learn_time).day > 0">
              <span class="number">{{ learnTime(basicData.week_learn_time).day }}</span
              >天
            </template>
            <template v-if="learnTime(basicData.week_learn_time).hour > 0">
              <span class="number">{{ learnTime(basicData.week_learn_time).hour }}</span
              >小时
            </template>
            <template v-if="learnTime(basicData.week_learn_time).minute > 0">
              <span class="number">{{ learnTime(basicData.week_learn_time).minute }}</span
              >分钟
            </template>
            <template v-if="learnTime(basicData.week_learn_time) == 0">
              <span class="number">{{ learnTime(basicData.week_learn_time) }}</span
              >分钟
            </template>
          </div>
          <div class="desc">本周学习</div>
        </el-row>
      </el-col>
      <el-col :span="6">
        <el-row type="flex" justify="center" class="item">
          <div class="name">
            <template v-if="learnTime(basicData.total_learn_time, 'sec').day > 0">
              <span class="number">{{ learnTime(basicData.total_learn_time, 'sec').day }}</span
              >天
            </template>
            <template v-if="learnTime(basicData.total_learn_time, 'sec').hour > 0">
              <span class="number">{{ learnTime(basicData.total_learn_time, 'sec').hour }}</span
              >小时
            </template>
            <template v-if="learnTime(basicData.total_learn_time, 'sec').minute > 0">
              <span class="number">{{ learnTime(basicData.total_learn_time, 'sec').minute }}</span
              >分钟
            </template>
            <template v-if="learnTime(basicData.total_learn_time, 'sec') == 0">
              <span class="number">{{ learnTime(basicData.total_learn_time, 'sec') }}</span
              >分钟
            </template>
          </div>
          <div class="desc">累计学习时长</div>
        </el-row>
      </el-col>
    </el-row>
    <div class="line"></div>
    <my-tabs :tab-list="tabList"></my-tabs>
    <template v-if="$util.isDef(latestList)">
      <div class="survey-list" v-if="latestList.length">
        <el-row
          type="flex"
          align="middle"
          class="item"
          v-for="(item, index) in latestList"
          :key="index"
        >
          <EduCourseImage
            :image="item.course_cover"
            :courseType="item.course_type"
            :width="170"
            :height="94"
            :border-radius="4"
            @click="handleContinueLearning(item)"
          ></EduCourseImage>
          <el-row type="flex" justify="space-between" class="info">
            <div class="title" @click="handleContinueLearning(item)">
              {{ item.course_title }}
            </div>
            <div class="valid-time">{{ formatTime(item.expire_rest) }}</div>
            <el-progress
              :percentage="item.finished_rate"
              :stroke-width="6"
              :format="format"
            ></el-progress>
          </el-row>
          <el-button
            type="primary"
            size="mini"
            round
            @click="handleContinueLearning(item)"
            :disabled="item.expire_rest == 0"
            >继续学习</el-button
          >
          <!-- <span class="close el-icon-close"></span> -->
        </el-row>
      </div>
      <edu-no-data v-else></edu-no-data>
    </template>
  </div>
</template>

<script>
import MyTabs from '../components/myTab.vue'
import EduNoData from '@/components/EduNoData'
import EduCourseImage from '@/components/EduCourseImage'
export default {
  components: {
    MyTabs,
    EduNoData,
    EduCourseImage
  },
  data() {
    return {
      tabList: [
        {
          type: '1',
          url: '/my/study/basic',
          title: '最近学习课程'
        }
      ],
      latestList: null,
      basicData: {},
      courseTypeClass: { 1: 'video', 2: 'live', 3: 'multipart', 4: 'classes' }
    }
  },
  mounted() {
    this.handleRecordInfo()
  },
  methods: {
    learnTime(time, unit) {
      if (this.$util.isEmpty(time)) time = 0

      if (unit == 'sec') {
        time = time / 60
      } else {
        time = +time
      }

      let day = Math.floor(time / (24 * 60))
      let hour = Math.floor((time - day * 24 * 60) / 60)
      let minute = Math.floor(time - day * 24 * 60 - hour * 60)

      if (day == 0 && hour == 0 && minute == 0) return 0
      return {
        day,
        hour,
        minute
      }
    },
    // 进度条提示文字
    format(percentage) {
      if (percentage == 0) {
        return `未开始`
      } else if (percentage == 100) {
        return `已完成`
      } else {
        return `已学习${percentage}%`
      }
    },
    // 获取列表
    handleRecordInfo() {
      this.$api.getCourseRecordFetch(
        {
          order: 'learn'
        },
        res => {
          this.latestList = res.data.latest
          this.basicData = res.data.basic
        }
      )
    },
    // 继续学习
    handleContinueLearning(item) {
      if (item.expire_rest === 0) {
        this.$message.info('课程已过期')
      } else {
        this.$router.push({ path: '/course/' + item.course_id })
      }
    },
    formatTime(time) {
      if (time === -1) {
        return '永久有效'
      } else if (time === 0) {
        return `已过期`
      } else {
        return `距离课程到期还有${Math.ceil(time / (24 * 3600))}天`
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.survey {
  .survey-title {
    font-size: 14px;
    color: $text-color-import;
  }
  .survey-summary {
    margin-top: 30px;
    .item {
      flex-direction: column;
      height: 90px;
      padding-left: 30px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.06);
      border-radius: 8px;
      .name {
        font-size: 16px;
        color: $text-color-auxiliary;
        line-height: 1;
        .number {
          font-size: 26px;
          font-weight: bold;
          line-height: 1;
          @include edu-color-auxiliary;
        }
      }
      .desc {
        margin-top: 8px;
        font-size: 16px;
        color: $text-color-secondary;
      }
    }
  }
  .line {
    margin: 20px -20px;
    height: 18px;
    background-color: #f7f7f7;
  }
  .survey-list {
    .item {
      padding: 15px 0;
      position: relative;
      & + .item {
        border-top: 1px solid $border-color-divider;
      }
      .info {
        height: 94px;
        flex: 1;
        flex-direction: column;
        padding: 6px 15px;
        .title {
          font-size: 14px;
          color: $text-color-import;
          cursor: pointer;
          @include ellipsisLine(2);
        }
        .valid-time {
          font-size: 12px;
          color: $text-color-auxiliary;
        }
        ::v-deep .el-progress {
          width: 350px;
          .el-progress-bar {
            color: #888;
            padding-right: 92px;
            margin-right: -97px;
          }
        }
      }
      .close {
        position: absolute;
        right: 0;
        top: 10px;
        cursor: pointer;
        color: #dcdfe6;
        display: none;
      }
      &:hover {
        .close {
          display: block;
        }
      }
    }
  }
}
</style>
